<template>
	<div class="Box" ref="mapChartRef">
		<topContainer></topContainer>
		<section class="Container">
			<ul>
				<li class="leftContainer">
					<leftContainer></leftContainer>
				</li>
				<li class="mapContainer">
					<mapContainer></mapContainer>
				</li>
				<li class="rightContainer">
					<rightContainer></rightContainer>
				</li>
			</ul>
		</section>
	</div>
</template>

<script>
	import dateContainer from '@/components/dateContainer.vue';
	import statistics from '@/components/statistics.vue';
	import leftContainer from '@/components/leftContainer/index.vue';
	import rightContainer from '@/components/rightContainer/index.vue';
	import mapContainer from '@/components/mapContainer/index.vue';
	import topContainer from '@/components/topContainer.vue';
	export default {
		name: '',
		components: {
			dateContainer,
			statistics,
			leftContainer,
			rightContainer,
			mapContainer,
			topContainer,
		},
		props: ['list'],
		data() {
			return {
				statusChart: null,
			};
		},
		methods: {},
		mounted() {},
	};
</script>

<style scoped>
	.Box {
		z-index: 1;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.Container {
			width: 100%;
			flex: 1;
			overflow: hidden;

			ul {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: space-around;
				list-style: none;
				li {
					flex: 3;
					height: 100%;
				}
				.mapContainer {
					flex: 7;
					/* background-color: red; */
				}
				.rightContainer {
					min-height: 0;
					overflow: visible;
					/* background-color: yellow; */
				}
			}
		}
	}
</style>
